<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 组件-优惠券弹窗 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="component-modal-coupon-receive" @click.stop>
		<uni-popup ref="popupModal" type="center" @change="onChange">
			<view class="popup-box">
				<view class="popup-header">
					<image class="header-image" src="/static/passenger/coupon.png" mode="widthFix"></image>
				</view>
				<view class="popup-content">
					<view class="content-title text-ellipsis-more">送你限时优惠券</view>
					<view class="content-list">
						<view class="list-item flex align-items-center" v-for="(item, index) in showData" :key="index" @click="handleReceive(index)">
							<view class="item-price">￥<text class="text">{{item.discount_price}}</text></view>
							<view class="item-line"></view>
							<view class="item-info flex-item">
								<view class="info-name">{{item.name}}</view>
								<view class="info-btn disabled" v-if="item.received == 1">已领取</view>
								<view class="info-btn" v-else>立即领取</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-footer" @click="onClose">
					<image class="footer-icon" src="/static/close_circle.png" mode="aspectFit"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		name: "componentModalCouponReceive",
		props: ["showData"],
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		methods: {
			// 打开模态框
			open() {
				this.$refs.popupModal.open()
			},
			// 关闭弹窗
			onClose() {
				this.$refs.popupModal.close()
			},
			// 改变事件
			onChange(e) {
				if (!e.show) getApp().globalData.showIndexCoupon = false
				this.$emit("onChange", e.show)
			},
			// 领取优惠券
			handleReceive(index) {
				if (!this.$util.verifyLogin()) return
				if (this.showData[index].received == 1) {
					uni.showToast({
						icon: "none",
						title: "该优惠券已领取"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.$util.request("passenger.coupon.receive", {
					coupon_id: this.showData[index].id,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.$emit("changeReceive", index)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('领取优惠券 ', error)
				})
			},
		},
	}
</script>

<style lang="scss">
	.component-modal-coupon-receive {
		position: relative;
		z-index: 999;

		.popup-box {
			width: 85vw;
			max-width: 640rpx;

			.popup-header {
				width: 100%;
				height: auto;
			}

			.popup-content {
				border-radius: 32rpx;
				border: 1px solid #FFF;
				background: linear-gradient(180deg, #FF4849 0%, #FFE1B9 100%);
				padding: 40rpx 40rpx 48rpx;
				margin-top: -90rpx;

				.content-title {
					color: #FFF;
					font-size: 48rpx;
					font-weight: 600;
					line-height: 60rpx;
					text-align: center;
				}

				.content-list {
					margin-top: 32rpx;

					.list-item {
						margin-top: 16rpx;
						border-radius: 32rpx;
						background: #FFF;
						padding: 24rpx 32rpx 24rpx 8rpx;

						&:first-child {
							margin-top: 0;
						}

						.item-price {
							text-align: center;
							color: #FF5F60;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 90rpx;
							min-width: 144rpx;

							.text {
								font-size: 56rpx;
							}
						}

						.item-line {
							margin-left: 8rpx;
							min-height: 112rpx;
							align-self: stretch;
							border: 1rpx dashed #EEEFF3;
						}

						.item-info {
							margin-left: 32rpx;

							.info-name {
								color: #242629;
								font-size: 28rpx;
								font-weight: 600;
								line-height: 40rpx;
							}

							.info-btn {
								display: inline-block;
								margin-top: 16rpx;
								color: #FFF;
								text-align: center;
								font-size: 24rpx;
								line-height: 36rpx;
								padding: 8rpx 24rpx;
								border-radius: 24rpx;
								background: #FF5F60;

								&.disabled {
									background: #D4D4D4;
								}
							}
						}
					}
				}
			}

			.popup-footer {
				padding-top: 32rpx;
				display: flex;
				justify-content: center;

				.footer-icon {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>